<template>
    <div class="console" id="terminal"></div>
</template>
<script>
import { Terminal } from "xterm"
import { FitAddon } from 'xterm-addon-fit'

export default {
    name: 'console',
    props: ['terminal'],
    data() {
        return {
            term: null,
            terminalSocket: null
        }
    },
    methods: {
        runRealTerminal() {
            console.log('webSocket is finished')
        },
        errorRealTerminal() {
            console.log('error')
        },
        closeRealTerminal() {
            console.log('close')
        }
    },
    mounted() {
        console.log('pid : ' + this.terminal.pid + ' is on ready')
        let terminalContainer = document.getElementById('terminal')
        this.term = new Terminal()
        this.term.open(terminalContainer)
        // open websocket
        this.terminalSocket = new WebSocket('ws://192.168.56.12:8081/admin/ws/webssh/experiment/1533470920671264/')
        this.terminalSocket.onopen = this.runRealTerminal
        this.terminalSocket.onclose = this.closeRealTerminal
        this.terminalSocket.onerror = this.errorRealTerminal
        this.term.attach(this.terminalSocket)
        this.term._initialized = true
        console.log('mounted is going on')
    },
    beforeDestroy() {
        this.terminalSocket.close()
        this.term.destroy()
    }
}
</script>